<template>
  <el-row :gutter="8">
    <el-col :span="24">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>属性列表</span>
            <el-row>
              <el-checkbox
                v-model="propParams.sysFlag"
                label="不看内置"
                style="margin: 0 3px;vertical-align: middle;"
                @change="handleFilterChange()"
                border
              />
              <el-input
                v-model="propParams.searchValue"
                placeholder="名称/编码"
                suffix-icon="Search"
                style="width: 180px;margin: 0 3px;vertical-align: middle;"
                @change="handleFilterChange()"
              />
              <el-button-group>
                <el-tooltip content="属性下载" placement="top">
                  <el-button icon="Download"></el-button>
                </el-tooltip>
                <el-tooltip content="初始化导入" placement="top">
                  <el-button v-if="!isView()" icon="Upload" @click="handleUploadProp"></el-button>
                </el-tooltip>
                <el-tooltip content="新增" placement="top">
                  <el-button v-if="!isView()" icon="Plus" @click="handleAddProp"/>
                </el-tooltip>
              </el-button-group>
            </el-row>
          </div>
        </template>
        <el-table v-loading="propLoading" :data="propList" height="520" border fit>
          <el-table-column label="名称" prop="name"/>
          <el-table-column label="编码" prop="code"/>
          <el-table-column label="数据类型" width="100">
            <template #default="scope">
              <dict-tag :options="prop_data_type" :value="scope.row.dataType"/>
            </template>
          </el-table-column>
          <el-table-column label="显示类型" width="100">
            <template #default="scope">
              <dict-tag :options="prop_view_type" :value="scope.row.viewType"/>
            </template>
          </el-table-column>
          <el-table-column label="快捷搜索" width="80">
            <template #default="scope">
              <dict-tag :options="sys_def_switch" :value="scope.row.quickSw"/>
            </template>
          </el-table-column>
          <el-table-column label="高级搜索" width="80">
            <template #default="scope">
              <dict-tag :options="sys_def_switch" :value="scope.row.advanceSw"/>
            </template>
          </el-table-column>
          <el-table-column label="列表显示" width="80">
            <template #default="scope">
              <dict-tag :options="sys_def_switch" :value="scope.row.viewSw"/>
            </template>
          </el-table-column>
          <el-table-column label="引用模型" :show-overflow-tooltip="true">
            <template #default="scope">
                <span v-if="scope.row.linkCode != null">
                    {{ scope.row.linkName }}
                    <el-tag size="small" type="info">{{ scope.row.linkCode }}</el-tag>
                </span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button-group v-if="canView(scope.row)" size="small">
                <el-button icon="View" @click="handleViewProp(scope.row)"/>
              </el-button-group>
              <el-button-group v-else size="small">
                <el-button
                  v-if="canEdit(scope.row)"
                  icon="Edit"
                  @click="handleEditProp(scope.row)"
                />
                <el-button
                  v-if="canDel(scope.row)"
                  icon="Delete"
                  @click="handleDeleteProp(scope.row)"
                />
                <el-button
                  v-if="canActive(scope.row)"
                  :icon="scope.row.editFlag < 4 ? 'Remove' : 'CircleCheck'"
                  @click="handleSwitchActive(scope.row)"
                />
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>

    <PropAdd ref="propAddForm" @reload="load()"/>
    <PropEdit ref="propEditForm" @reload="load()"/>
    <PropUpload ref="propUploadForm" @reload="load()"/>
  </el-row>
</template>

<script>
import { defineComponent, getCurrentInstance, reactive, ref, toRefs } from 'vue';
import { listProp, delProp, activeProp } from '@/api/module/prop';
import PropAdd from '@/views/module/prop/add.vue';
import PropEdit from '@/views/module/prop/edit.vue';
import PropUpload from '@/views/module/prop/upload.vue';
import { PageTypeEnum } from '@/store/enums/PageTypeEnum';

export default defineComponent({
  name: 'PropConfig',
  components: { PropAdd, PropEdit, PropUpload },
  props: ['pageType', 'model'],
  setup(props) {
    const { proxy } = getCurrentInstance();
    const { pageType, model } = toRefs(props);
    const {
      sys_def_switch,
      prop_view_type,
      prop_data_type,
    } = proxy.useDict('sys_def_switch', 'prop_view_type', 'prop_data_type');
    const vueData = reactive({
      editType: ref(PageTypeEnum.ADD),
      propDbList: ref([]),
      propParams: {
        searchValue: '',
        sysFlag: false,
        modelCode: model.value.code,
      },
      propLoading: false,
      propList: [],
    });

    function handleAddProp() {
      proxy.$refs['propAddForm'].show(model.value.code);
    }

    function handleEditProp(one) {
      proxy.$refs['propEditForm'].show(one, 1);
    }

    function handleViewProp(one) {
      proxy.$refs['propEditForm'].show(one, 0);
    }

    function handleUploadProp() {
      proxy.$refs['propUploadForm'].show(model.value.code);
    }

    function handleDeleteProp(one) {
      proxy.$modal.confirm('确定删除？').then(function () {
        return delProp(one.uid);
      }).then(() => {
        load();
        proxy.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    }

    function handleSwitchActive(rec) {
      const name = rec.editFlag < 4 ? '停用' : '启用';
      proxy.$modal.confirm(`确定${name}？`).then(function () {
        const updateParam = {
          uid: rec.uid,
          editFlag: null,
        };
        if (rec.editFlag >= 4) {
          updateParam.editFlag = rec.editFlag - 4;
        } else {
          updateParam.editFlag = rec.editFlag + 4;
        }
        return activeProp(updateParam);
      }).then(() => {
        load();
        proxy.$modal.msgSuccess("操作成功");
      }).catch(() => {
        proxy.$modal.msgSuccess("操作失败");
      });
    }

    function handleFilterChange() {
      filterViewProp();
    }

    function load() {
      vueData.propLoading = true;
      listProp({ 'modelCode': model.value.code }).then(res => {
        vueData.propDbList = res.data;
        filterViewProp();
        vueData.propLoading = false;
      });
    }

    function filterViewProp() {
      const { sysFlag, searchValue } = vueData.propParams;
      vueData.propList = vueData.propDbList.filter(p => {
        let findFlag = true;
        if (searchValue != null && searchValue != '') {
          findFlag = p.name.indexOf(searchValue) > -1 || p.code.indexOf(searchValue) > -1;
        }
        if (sysFlag && p.hideCode != null && p.hideCode != '') {
          console.log(p.hideCode);
          findFlag = p.hideCode.indexOf('sys') != 0 && findFlag
        }
        return findFlag;
      });
    }

    function isView() {
      return pageType.value == PageTypeEnum.QUERY;
    }

    function canEdit(rec) {
      return rec.editFlag == 0 || rec.editFlag == 1;
    }

    function canDel(rec) {
      return rec.editFlag == 0;
    }

    function canView(rec) {
      return rec.editFlag == 3 || isView();
    }

    function canActive(rec) {
      return rec.code != 'mco' && (canEdit(rec) || rec.editFlag >= 4);
    }

    return {
      pageType,
      sys_def_switch,
      prop_view_type,
      prop_data_type,
      ...toRefs(vueData),
      isView,
      canEdit,
      canDel,
      canView,
      canActive,
      handleAddProp,
      handleEditProp,
      handleViewProp,
      handleUploadProp,
      handleDeleteProp,
      handleSwitchActive,
      handleFilterChange,
      load,
    };
  }
});
</script>

<style scoped>

</style>